<template>
    <el-dialog :width="screenWidth" class="loginContainer" :title="title" modal="true"  :fullscreen="fullscreen" center="true"  v-model="toLoginFlag" >
        <el-form :rules="rules" ref="formLogin" :model="form"  >
                <h3 class="loginTitle">系统登录</h3>
                <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入用户名" v-model="form.username" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item >
                    <el-input type="text" style="width: 70%;margin-right: 5px" :placeholder="content" v-model="form.code"></el-input>
                    <img id="img" style="width: 20%;height: 40px;margin-bottom: -14px" alt="验证码" @click="_verificationCode" :src="captchaUrl" />
                </el-form-item>
            <el-button type="primary" style="width: 100%" @click="_loginSubmit('formLogin')">登录</el-button>

            <div style="text-align: center">还没有账号吗？ <el-button type="text" @click="signUp">点击这里注册</el-button></div>
        </el-form>
    </el-dialog>
</template>

<script>
    import {getCookie, postReq} from "../utils/api";
    export default {
        name: "ToLogin",
        data(){
          return{
              screenWidth: document.body.clientWidth,
              fullscreen:false,
              title:'',
              toLoginFlag:false,
              form:{
                  username:'',
                  password:'',
                  code:'',
                  codeCheck:''
              },
              captchaUrl:'',
              timer: null,
              content: '倒计时',  // 按钮里显示的内容
              check:true,
              rules:{
                  username: [
                      { required: true, message: '请填写用户名', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '请填写用户名密码', trigger: 'blur' }
                  ]
              }
          }
        }
        ,
        methods:{
            _loginSubmit(formName){
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        postReq('/api/sys_user/login',this.form).then(res=>{
                            console.log('login---',res)
                            if (res.data.code===0){

                                let auth= getCookie('Authorization')

                                this.toLoginFlag=false
                                sessionStorage.setItem('authorization',res.headers.authorization)
                                sessionStorage.setItem('user',JSON.stringify(res.data.data))
                                let btnList = res.headers.btnlist

                                console.log('let btnList ',btnList)
                                if (undefined===btnList){
                                    sessionStorage.setItem('btnList','')
                                }else{
                                    sessionStorage.setItem('btnList',btnList)
                                }
                                this.$emit('loginBack')
                                this.toLoginFlag=false
                            }else{
                                this.$message({
                                    offset:40,
                                    message: res.data.message,
                                    type: 'warning'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            _verificationCode() {
                postReq("/api/sys_user/captcha",{}).then(response => {
                    this.countDown()
                    console.log((response.data.data.url))
                    console.log(decodeURI(response.data.data.url))
                    this.captchaUrl = 'data:image/png;base64,' + decodeURI(response.data.data.url)
                    this.form.codeCheck = response.data.data.code
                    this.toLoginFlag=true
                }).catch(err => {
                    console.log(err);
                })
            },
            signUp(){
                this.$router.push('/sign_up')
            },
            countDown() {
                clearInterval(this.timer);
                this.timer=null
                const timerFor=1000
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.timer = setInterval(() => {
                        if (this.count > 1 && this.count <= TIME_COUNT) {
                            this.count--;
                            this.content = '验证码失效时间 ' + this.count + ' s'
                        } else {
                            this.content = '验证码已失效请重新获取'
                            clearInterval(this.timer);
                            this.timer = null;

                        }
                    }, timerFor)
                }

            },
            _updateCaptcha(){
                this.captchaUrl = '/sys_user/captcha'
            },
            _open(){
                if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
                    this.screenWidth=document.body.clientWidth/1.1
                }else{
                    this.screenWidth='30%'
                }
                this._verificationCode()
            },


        }
    }
</script>

<style scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 150px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle{
        margin: 8px auto 40px auto;
        text-align: center;
    }
</style>